<template>
  <ex-dialog
    width="600px"
    class="ex-diolog"
    :title="title"
    :visible="visible"
    @closeDialog="handleClose"
  >	
		<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm">
      <el-form-item label="登录手机号：" prop="account">
				<el-input type="text" v-model="ruleForm.account" placeholder="填写手机号" maxlength="11"></el-input>
			</el-form-item>
      
			<el-form-item label="登录密码：" prop="password">
				<el-input show-password v-model="ruleForm.password" autocomplete="new-password" placeholder="填写登录密码"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button @click="handleClose('ruleForm')">取消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')" :loading="loading">下一步</el-button>
			</el-form-item>
		</el-form>
  </ex-dialog>
</template>
<script>
// components
import Loading from '@/components/Loading/index'
// api
import {
  checkPhone,
} from '@/api/merchants/merchantsAudit'

export default {
  components: {
    Loading
  },
  props: {
    visible: Boolean,
  },
  data() {
    var checkPassword = (rule, value, callback) => {
        var reg =/^(?!([a-zA-Z]+|\d+)$)[a-zA-Z\d]{6,12}$/;
        if (!value) {
          console.log('111111111111', value)
          return callback(new Error('请输入密码'));
        } else if(value.match(reg)==null){
          return callback(new Error('密码必须包含英文字母和数字且长度为6至12位'));
        } else {
          callback();
        }
      }; 
   
    return {
      title: '验证登录手机号',
      loading: false,
      
			ruleForm: {
        account: '',//手机号
        password: '',//密码
			},
			rules: {
          account: [
            { required: true,message: '请填写手机号',trigger: 'blur' }
          ],
          password: [
            { validator: checkPassword ,required: true,trigger: ['blur','change'] }
            // { validator: checkPassword ,required: true,trigger:'blur' }
          ],
         
      }
    }
  },
  computed: {
   
  },
  created() {
    
	},
  methods: {
    //获取详情
    getDatail(){
      var id = this.id
      activityDetail(id).then(res => {
        this.ruleForm = res.result
      })
    },
    //新建子账号
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var params = {
            phone: this.ruleForm.account
          }
          checkPhone(params).then((res) => {
            console.log('isNext',res)
            if(res.code == 200){
              this.$emit('nextStep',this.ruleForm)
              this.handleClose()
            }
            return isNext
          })
          .catch(()=>{

          })
          .finally(() => {});
         
          
          
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //校验手机号
    checkaccount(){
      console.log('this.ruleForm.account.length',this.ruleForm.account.length)
      if(this.ruleForm.account.length == 11){
        var params = {
          phone: this.ruleForm.account
        }
        checkPhone(params).then((res) => {
          console.log('isNext',res)
          if(res.code == 200){
            var isNext = 1
            console.log('isNext',isNext)
          }
          return isNext
        })
        .catch(()=>{
          var isNext = 2
          console.log('isNext',isNext)
        })
        .finally(() => {});
      }
    },
		//取消
    handleClose() {
      this.$emit('update:visible', false)
			// this.$refs[formName].resetFields();
    },
		//确认
		handleConfirm(){
			this.$emit('success', '你好')
		},
    handleSuccess(msg) {
      if (msg === '已拒绝') {
        var type = 'error'
      } else {
        var type = 'success'
      }
      this.$message({
        message: msg,
        type: type,
        duration: 1500,
        onClose: () => {
          this.handleClose()
          this.$emit('success')
        }
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.ex-diolog {
  ::v-deep .ex--dialog--footer {
    border: none !important;
		padding: 0 !important;
  }
	::v-deep .ex--dialog--main {
    padding: 10px 20px !important; 
  }
}
::v-deep .avatar-uploader2 .el-upload {
  width: 100% !important;
}

.avatar-uploader2 {
  width: 130px;
  height: 130px;
  text-align: center;
  line-height: 130px;
  background-color: #fbfdff;
  border: 1px dashed #c0ccda;
}

.banner_img {
  width: 130px;
  height: 130px;
}
.el-input{
  width: 300px;
}
</style>